{{template "base" .}}

{{define "content"}}
<!-- 背景装饰 -->
<div class="fixed inset-0 -z-10 overflow-hidden">
    <div class="absolute -top-40 -right-32 w-96 h-96 bg-gradient-to-br from-blue-400/20 to-purple-600/20 rounded-full blur-3xl"></div>
    <div class="absolute -bottom-40 -left-32 w-96 h-96 bg-gradient-to-tr from-green-400/20 to-blue-600/20 rounded-full blur-3xl"></div>
</div>

<div x-data="customerDetailData()" class="space-y-8 relative">
    <!-- Page Header -->
    <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-white/20 p-8">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
            <div class="relative">
                <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg blur opacity-25"></div>
                <div class="relative">
                    <h1 class="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">客户详情</h1>
                    <p class="mt-2 text-gray-600 flex items-center">
                        <i class="fas fa-info-circle mr-2 text-blue-500"></i>
                        查看客户的详细信息和推送记录
                    </p>
                </div>
            </div>
            <div class="mt-6 sm:mt-0 flex flex-wrap gap-3">
                <a href="/customers" 
                   class="group relative inline-flex items-center px-6 py-3 bg-white/90 backdrop-blur-sm text-gray-700 rounded-xl shadow-lg border border-gray-200/50 hover:bg-gray-50 hover:shadow-xl transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2">
                    <div class="absolute inset-0 bg-gradient-to-r from-gray-100 to-gray-200 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                    <i class="fas fa-arrow-left text-sm mr-2 relative z-10"></i>
                    <span class="relative z-10 font-medium">返回列表</span>
                </a>
                <a :href="'/customers/' + customerId + '/edit'" 
                   class="group relative inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl shadow-lg hover:from-blue-600 hover:to-blue-700 hover:shadow-xl transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                    <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-blue-700 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                    <i class="fas fa-edit text-sm mr-2 relative z-10"></i>
                    <span class="relative z-10 font-medium">编辑客户</span>
                </a>
                <button @click="pushCustomer()" 
                        :disabled="!canPush(customer.status)"
                        class="group relative inline-flex items-center px-6 py-3 bg-gradient-to-r from-emerald-500 to-emerald-600 text-white rounded-xl shadow-lg hover:from-emerald-600 hover:to-emerald-700 hover:shadow-xl transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none disabled:hover:shadow-lg">
                    <div class="absolute inset-0 bg-gradient-to-r from-emerald-600 to-emerald-700 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                    <i class="fas fa-paper-plane text-sm mr-2 relative z-10"></i>
                    <span class="relative z-10 font-medium">推送客户</span>
                </button>
                <button @click="deleteCustomer()" 
                        class="group relative inline-flex items-center px-6 py-3 bg-gradient-to-r from-rose-500 to-rose-600 text-white rounded-xl shadow-lg hover:from-rose-600 hover:to-rose-700 hover:shadow-xl transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2">
                    <div class="absolute inset-0 bg-gradient-to-r from-rose-600 to-rose-700 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                    <i class="fas fa-trash text-sm mr-2 relative z-10"></i>
                    <span class="relative z-10 font-medium">删除客户</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Loading State -->
    <div x-show="loading" class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-white/20 p-8">
        <div class="flex flex-col items-center justify-center py-12">
            <div class="relative">
                <div class="w-16 h-16 border-4 border-blue-200 rounded-full animate-spin"></div>
                <div class="absolute top-0 left-0 w-16 h-16 border-4 border-transparent border-t-blue-600 rounded-full animate-spin"></div>
            </div>
            <div class="mt-6 text-center">
                <h3 class="text-lg font-semibold text-gray-800 mb-2">加载客户信息中</h3>
                <p class="text-gray-600">请稍候，正在获取详细数据...</p>
            </div>
        </div>
    </div>

    <!-- Customer Info -->
    <div x-show="!loading" class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-white/20 overflow-hidden">
        <div class="bg-gradient-to-r from-blue-50 to-purple-50 px-8 py-6 border-b border-gray-200/50">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="p-2 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg">
                        <i class="fas fa-user text-white text-lg"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800">基本信息</h3>
                </div>
                <span class="inline-flex px-4 py-2 text-sm font-bold rounded-full shadow-lg border-2 border-white/50"
                      :class="getStatusClass(customer.status)"
                      x-text="getStatusText(customer.status)"></span>
            </div>
        </div>
        
        <div class="p-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- 客户头像和基本信息 -->
                <div class="lg:col-span-1">
                    <div class="text-center">
                        <div class="relative inline-block">
                            <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full blur opacity-75"></div>
                            <div class="relative h-32 w-32 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-2xl">
                                <i class="fas fa-user text-4xl text-white"></i>
                            </div>
                            <div class="absolute -bottom-2 -right-2 h-8 w-8 bg-gradient-to-r from-emerald-400 to-emerald-600 rounded-full flex items-center justify-center shadow-lg">
                                <i class="fas fa-check text-white text-xs"></i>
                            </div>
                        </div>
                        <div class="mt-6">
                            <h4 class="text-2xl font-bold text-gray-800" x-text="customer.name"></h4>
                            <div class="mt-4 space-y-3">
                                <div class="flex items-center justify-center space-x-2 text-gray-600">
                                    <div class="p-2 bg-blue-100 rounded-lg">
                                        <i class="fas fa-phone text-blue-600"></i>
                                    </div>
                                    <span class="font-medium" x-text="customer.phone"></span>
                                </div>
                                <div x-show="customer.age" class="flex items-center justify-center space-x-2 text-gray-600">
                                    <div class="p-2 bg-purple-100 rounded-lg">
                                        <i class="fas fa-birthday-cake text-purple-600"></i>
                                    </div>
                                    <span class="font-medium">
                                        <span x-text="customer.age"></span>岁
                                        <span x-text="customer.gender === 'male' ? ' · 男' : customer.gender === 'female' ? ' · 女' : ''"></span>
                                    </span>
                                </div>
                                <div class="flex items-center justify-center space-x-2 text-gray-600">
                                    <div class="p-2 bg-emerald-100 rounded-lg">
                                        <i class="fas fa-map-marker-alt text-emerald-600"></i>
                                    </div>
                                    <span class="font-medium" x-text="customer.city"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 学习信息 -->
                <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-6 border border-blue-100">
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="p-2 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg">
                            <i class="fas fa-graduation-cap text-white"></i>
                        </div>
                        <h5 class="text-lg font-bold text-gray-800">学习信息</h5>
                    </div>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-3 bg-white/70 rounded-xl">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-book text-blue-600"></i>
                                <span class="font-medium text-gray-700">科目</span>
                            </div>
                            <span class="font-semibold text-gray-800" x-text="customer.subject"></span>
                        </div>
                        <div x-show="customer.grade" class="flex items-center justify-between p-3 bg-white/70 rounded-xl">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-layer-group text-indigo-600"></i>
                                <span class="font-medium text-gray-700">年级</span>
                            </div>
                            <span class="font-semibold text-gray-800" x-text="customer.grade"></span>
                        </div>
                    </div>
                </div>

                <!-- 系统信息 -->
                <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-6 border border-purple-100">
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="p-2 bg-gradient-to-r from-purple-500 to-pink-600 rounded-lg">
                            <i class="fas fa-cog text-white"></i>
                        </div>
                        <h5 class="text-lg font-bold text-gray-800">系统信息</h5>
                    </div>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-3 bg-white/70 rounded-xl">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-user-plus text-purple-600"></i>
                                <span class="font-medium text-gray-700">创建人</span>
                            </div>
                            <span class="font-semibold text-gray-800" x-text="customer.creator?.real_name || '未知'"></span>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-white/70 rounded-xl">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-calendar-plus text-pink-600"></i>
                                <span class="font-medium text-gray-700">创建时间</span>
                            </div>
                            <span class="font-semibold text-gray-800 text-sm" x-text="formatDate(customer.created_at)"></span>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-white/70 rounded-xl">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-calendar-edit text-purple-600"></i>
                                <span class="font-medium text-gray-700">更新时间</span>
                            </div>
                            <span class="font-semibold text-gray-800 text-sm" x-text="formatDate(customer.updated_at)"></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 备注信息 -->
            <div x-show="customer.notes" class="mt-8 lg:col-span-3">
                <div class="bg-gradient-to-br from-amber-50 to-orange-50 rounded-2xl p-6 border border-amber-100">
                    <div class="flex items-center space-x-3 mb-4">
                        <div class="p-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-lg">
                            <i class="fas fa-sticky-note text-white"></i>
                        </div>
                        <h5 class="text-lg font-bold text-gray-800">备注信息</h5>
                    </div>
                    <div class="bg-white/70 rounded-xl p-4">
                        <p class="text-gray-700 whitespace-pre-wrap leading-relaxed" x-text="customer.notes"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Push Records -->
    <div x-show="!loading" class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-white/20 overflow-hidden">
        <div class="bg-gradient-to-r from-emerald-50 to-teal-50 px-8 py-6 border-b border-gray-200/50">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="p-2 bg-gradient-to-r from-emerald-500 to-teal-600 rounded-lg">
                        <i class="fas fa-paper-plane text-white text-lg"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-800">推送记录</h3>
                        <p class="text-gray-600">该客户的历史推送记录</p>
                    </div>
                </div>
                <div class="bg-white/70 px-4 py-2 rounded-full border border-emerald-200">
                    <span class="text-sm font-semibold text-gray-700">
                        共 <span class="text-emerald-600" x-text="pushRecords.length">0</span> 条记录
                    </span>
                </div>
            </div>
        </div>
        
        <div class="p-8">
            <div x-show="pushRecords.length === 0" class="text-center py-16">
                <div class="relative inline-block mb-6">
                    <div class="absolute inset-0 bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full blur-xl opacity-30"></div>
                    <div class="relative bg-gradient-to-br from-emerald-100 to-teal-100 p-8 rounded-full">
                        <i class="fas fa-paper-plane text-6xl text-emerald-600"></i>
                    </div>
                </div>
                <h4 class="text-xl font-bold text-gray-800 mb-2">暂无推送记录</h4>
                <p class="text-gray-600 mb-8">该客户还没有任何推送记录，立即开始推送吧！</p>
                <button @click="pushCustomer()" 
                        :disabled="!canPush(customer.status)"
                        class="group relative inline-flex items-center px-8 py-4 bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-2xl shadow-xl hover:from-emerald-600 hover:to-teal-700 hover:shadow-2xl transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none">
                    <div class="absolute inset-0 bg-gradient-to-r from-emerald-600 to-teal-700 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                    <i class="fas fa-paper-plane text-lg mr-3 relative z-10"></i>
                    <span class="relative z-10 font-bold text-lg">立即推送</span>
                </button>
            </div>
            
            <div x-show="pushRecords.length > 0" class="flow-root">
                <ul class="-mb-8">
                    <template x-for="(record, index) in pushRecords" :key="record.id">
                        <li>
                            <div class="relative pb-8" x-show="index < pushRecords.length - 1">
                                <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                                <div class="relative flex space-x-3">
                                    <div>
                                        <span class="h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white" 
                                              :class="getRecordStatusClass(record.status)">
                                            <i :class="getRecordStatusIcon(record.status)" class="text-white text-xs"></i>
                                        </span>
                                    </div>
                                    <div class="min-w-0 flex-1 pt-1.5">
                                        <div class="flex justify-between space-x-4">
                                            <div class="flex-1">
                                                <p class="text-sm font-medium text-gray-900">
                                                    推送到：<span x-text="record.partner?.name || '未知机构'"></span>
                                                </p>
                                                <p class="text-sm text-gray-500" x-text="getRecordStatusText(record.status)"></p>
                                                <p x-show="record.notes" class="text-sm text-gray-600 mt-1" x-text="record.notes"></p>
                                            </div>
                                            <div class="text-right text-sm whitespace-nowrap text-gray-500">
                                                <span x-text="formatDate(record.created_at)"></span>
                                            </div>
                                        </div>
                                        <div x-show="record.response_data" class="mt-2 p-3 bg-gray-50 rounded-md">
                                            <p class="text-xs text-gray-600">响应信息：</p>
                                            <p class="text-xs text-gray-800 mt-1" x-text="record.response_data"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="relative flex space-x-3" x-show="index === pushRecords.length - 1">
                                <div>
                                    <span class="h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white" 
                                          :class="getRecordStatusClass(record.status)">
                                        <i :class="getRecordStatusIcon(record.status)" class="text-white text-xs"></i>
                                    </span>
                                </div>
                                <div class="min-w-0 flex-1 pt-1.5">
                                    <div class="flex justify-between space-x-4">
                                        <div class="flex-1">
                                            <p class="text-sm font-medium text-gray-900">
                                                推送到：<span x-text="record.partner?.name || '未知机构'"></span>
                                            </p>
                                            <p class="text-sm text-gray-500" x-text="getRecordStatusText(record.status)"></p>
                                            <p x-show="record.notes" class="text-sm text-gray-600 mt-1" x-text="record.notes"></p>
                                        </div>
                                        <div class="text-right text-sm whitespace-nowrap text-gray-500">
                                            <span x-text="formatDate(record.created_at)"></span>
                                        </div>
                                    </div>
                                    <div x-show="record.response_data" class="mt-2 p-3 bg-gray-50 rounded-md">
                                        <p class="text-xs text-gray-600">响应信息：</p>
                                        <p class="text-xs text-gray-800 mt-1" x-text="record.response_data"></p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div x-show="!loading" class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-white/20 overflow-hidden">
        <div class="bg-gradient-to-r from-indigo-50 to-purple-50 px-8 py-6 border-b border-gray-200/50">
            <div class="flex items-center space-x-3">
                <div class="p-2 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-lg">
                    <i class="fas fa-bolt text-white text-lg"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-800">快速操作</h3>
            </div>
        </div>
        <div class="p-8">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <button @click="updateStatus('contacted')" 
                        :disabled="customer.status === 'contacted'"
                        class="group relative bg-gradient-to-br from-amber-400 to-orange-500 text-white p-4 rounded-xl shadow-lg hover:from-amber-500 hover:to-orange-600 hover:shadow-xl transform hover:scale-102 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none">
                    <div class="absolute inset-0 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-200"></div>
                    <div class="relative z-10">
                        <div class="flex items-center justify-center mb-2">
                            <div class="p-1.5 bg-white/25 rounded-lg backdrop-blur-sm">
                                <i class="fas fa-phone text-xs"></i>
                            </div>
                        </div>
                        <h4 class="text-center text-sm font-medium">标记已联系</h4>
                    </div>
                </button>

                <button @click="updateStatus('interested')" 
                        :disabled="customer.status === 'interested'"
                        class="group relative bg-gradient-to-br from-purple-400 to-pink-500 text-white p-4 rounded-xl shadow-lg hover:from-purple-500 hover:to-pink-600 hover:shadow-xl transform hover:scale-102 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none">
                    <div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-200"></div>
                    <div class="relative z-10">
                        <div class="flex items-center justify-center mb-2">
                            <div class="p-1.5 bg-white/25 rounded-lg backdrop-blur-sm">
                                <i class="fas fa-heart text-xs"></i>
                            </div>
                        </div>
                        <h4 class="text-center text-sm font-medium">标记有意向</h4>
                    </div>
                </button>

                <button @click="updateStatus('enrolled')" 
                        :disabled="customer.status === 'enrolled'"
                        class="group relative bg-gradient-to-br from-emerald-400 to-teal-500 text-white p-4 rounded-xl shadow-lg hover:from-emerald-500 hover:to-teal-600 hover:shadow-xl transform hover:scale-102 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none">
                    <div class="absolute inset-0 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-200"></div>
                    <div class="relative z-10">
                        <div class="flex items-center justify-center mb-2">
                            <div class="p-1.5 bg-white/25 rounded-lg backdrop-blur-sm">
                                <i class="fas fa-graduation-cap text-xs"></i>
                            </div>
                        </div>
                        <h4 class="text-center text-sm font-medium">标记已报名</h4>
                    </div>
                </button>

                <button @click="updateStatus('invalid')" 
                        :disabled="customer.status === 'invalid'"
                        class="group relative bg-gradient-to-br from-rose-400 to-red-500 text-white p-4 rounded-xl shadow-lg hover:from-rose-500 hover:to-red-600 hover:shadow-xl transform hover:scale-102 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-rose-400 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none">
                    <div class="absolute inset-0 bg-gradient-to-br from-rose-500 to-red-600 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-200"></div>
                    <div class="relative z-10">
                        <div class="flex items-center justify-center mb-2">
                            <div class="p-1.5 bg-white/25 rounded-lg backdrop-blur-sm">
                                <i class="fas fa-times text-xs"></i>
                            </div>
                        </div>
                        <h4 class="text-center text-sm font-medium">标记无效</h4>
                    </div>
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    function customerDetailData() {
        return {
            loading: true,
            customerId: null,
            customer: {},
            pushRecords: [],
            
            init() {
                // 从URL获取客户ID
                const pathParts = window.location.pathname.split('/');
                this.customerId = pathParts[pathParts.length - 1]; // /customers/{id}
                this.loadCustomer();
            },
            
            async loadCustomer() {
                this.loading = true;
                try {
                    const token = localStorage.getItem('token');
                    const response = await fetch(`/api/v1/customers/${this.customerId}`, {
                        headers: {
                            'Authorization': 'Bearer ' + token
                        }
                    });
                    
                    if (response.ok) {
                        const data = await response.json();
                        if (data.code === 200) {
                            this.customer = data.data || {};
                            this.pushRecords = data.data.push_records || [];
                        } else {
                            showToast('客户不存在', 'error');
                            window.location.href = '/customers';
                        }
                    } else {
                        showToast('加载客户信息失败', 'error');
                        window.location.href = '/customers';
                    }
                } catch (error) {
                    console.error('Failed to load customer:', error);
                    showToast('网络错误', 'error');
                    window.location.href = '/customers';
                } finally {
                    this.loading = false;
                }
            },
            
            async updateStatus(status) {
                if (!confirm(`确定要将客户状态更改为"${this.getStatusText(status)}"吗？`)) {
                    return;
                }
                
                try {
                    const token = localStorage.getItem('token');
                    const response = await fetch(`/api/v1/customers/${this.customerId}/status`, {
                        method: 'PATCH',
                        headers: {
                            'Authorization': 'Bearer ' + token,
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ status })
                    });
                    
                    if (response.ok) {
                        const data = await response.json();
                        if (data.code === 200) {
                            this.customer.status = status;
                            showToast('状态更新成功', 'success');
                        } else {
                            showToast(data.message || '状态更新失败', 'error');
                        }
                    } else {
                        showToast('状态更新失败', 'error');
                    }
                } catch (error) {
                    console.error('Failed to update status:', error);
                    showToast('网络错误', 'error');
                }
            },
            
            async deleteCustomer() {
                // 第一次确认
                if (!confirm(`确定要删除客户"${this.customer.name}"吗？\n\n注意：删除后将无法恢复！`)) {
                    return;
                }
                
                // 第二次确认
                const confirmText = prompt('请输入客户姓名以确认删除操作：');
                if (confirmText !== this.customer.name) {
                    if (confirmText !== null) { // 用户没有取消
                        showToast('输入的姓名不匹配，删除操作已取消', 'warning');
                    }
                    return;
                }
                
                try {
                    const token = localStorage.getItem('token');
                    const response = await fetch(`/api/v1/customers/${this.customerId}`, {
                        method: 'DELETE',
                        headers: {
                            'Authorization': 'Bearer ' + token
                        }
                    });
                    
                    if (response.ok) {
                        const data = await response.json();
                        if (data.code === 200) {
                            showToast('客户删除成功', 'success');
                            // 延迟跳转，让用户看到成功提示
                            setTimeout(() => {
                                window.location.href = '/customers';
                            }, 1500);
                        } else {
                            showToast(data.message || '删除客户失败', 'error');
                        }
                    } else {
                        showToast('删除客户失败', 'error');
                    }
                } catch (error) {
                    console.error('Failed to delete customer:', error);
                    showToast('网络错误', 'error');
                }
            },
            
            pushCustomer() {
                if (!this.canPush(this.customer.status)) {
                    showToast('该客户状态不允许推送', 'warning');
                    return;
                }
                
                window.location.href = `/push/new?customer_id=${this.customerId}`;
            },
            
            canPush(status) {
                return ['new', 'contacted', 'interested'].includes(status);
            },
            
            getStatusClass(status) {
                const classes = {
                    'new': 'bg-blue-100 text-blue-800',
                    'contacted': 'bg-yellow-100 text-yellow-800',
                    'interested': 'bg-purple-100 text-purple-800',
                    'enrolled': 'bg-green-100 text-green-800',
                    'invalid': 'bg-red-100 text-red-800'
                };
                return classes[status] || 'bg-gray-100 text-gray-800';
            },
            
            getStatusText(status) {
                const texts = {
                    'new': '新客户',
                    'contacted': '已联系',
                    'interested': '有意向',
                    'enrolled': '已报名',
                    'invalid': '无效客户'
                };
                return texts[status] || '未知';
            },
            
            getRecordStatusClass(status) {
                const classes = {
                    'pending': 'bg-yellow-500',
                    'success': 'bg-green-500',
                    'failed': 'bg-red-500'
                };
                return classes[status] || 'bg-gray-500';
            },
            
            getRecordStatusIcon(status) {
                const icons = {
                    'pending': 'fas fa-clock',
                    'success': 'fas fa-check',
                    'failed': 'fas fa-times'
                };
                return icons[status] || 'fas fa-question';
            },
            
            getRecordStatusText(status) {
                const texts = {
                    'pending': '推送中',
                    'success': '推送成功',
                    'failed': '推送失败'
                };
                return texts[status] || '未知状态';
            },
            
            formatDate(dateString) {
                if (!dateString) return '';
                return new Date(dateString).toLocaleDateString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit'
                });
            }
        }
    }
</script>
{{end}}